<template>
	<view class="page">
		<Navbar title="动态信息详情" />
		<u-sticky customNavHeight="0" z-index="6">
			<u-image show-loading :show-menu-by-longpress="false" :src="detail.cover_img" width="100%" height="248px"
				@click="preImage" />
		</u-sticky>
		<view class="body">
			<view class="tag">丘山阅</view>
			<view class="mark">丘山阅镇</view>
			<Sub-title :label="detail.shop_name" bottom-color="#E9F4F4" />
			<view class="base">
				<view>
					<u-text :text="`${detail.start_time}——${detail.end_time}`" prefix-icon="clock-fill"
						icon-style="font-size: 28rpx; color: #3BA199; margin-right: 20rpx" lines="1" line-height="60rpx"
						color="#555555" size="28rpx" />
					<u-text :text="detail.address || '-'" prefix-icon="map-fill"
						icon-style="font-size: 28rpx; color: #1A98FC; margin-right: 20rpx" lines="1" line-height="60rpx"
						color="#555555" size="28rpx" @click="handleMap" />
					<u-text :text="detail.phone || '-'" prefix-icon="phone-fill"
						icon-style="font-size: 28rpx; color: #2CB9A4; margin-right: 20rpx" lines="1" line-height="60rpx"
						color="#555555" size="28rpx" @click="callPhone" />
				</view>
				<view class="status">
					<u-image show-loading :show-menu-by-longpress="false" v-if="timeout"
						:src="require('@/static/my/timeout.png')" width="116rpx" height="72rpx" />
				</view>
			</view>
			<view class="base">
				<u-text text="优惠券" prefix-icon="coupon-fill"
					icon-style="font-size: 28rpx; color: #EC9B51; margin-right: 20rpx" lines="1" line-height="60rpx"
					color="#555555" size="28rpx" />
				<view @click="handleCoupon">
					<u-input v-model="coupon.name" disabled disabled-color="#ffffff"
						:placeholder="couponList.length > 0 ? '请选择优惠券' : '暂无优惠券'" font-size="28rpx" input-align="right"
						suffix-icon="arrow-right" suffix-icon-style="color: #909399"
						:placeholder-style="placeholderStyle" border="none" />
				</view>
			</view>
			<Sub-title label="参与活动" bottom-color="#E9F4F4" />
			<view class="card-item" :style="{
          backgroundImage: `url(${webSrc('/assets/web_img/home/ticket-card.png')})`,
        }">
				<view>
					<u-text :text="detail.title || '-'" color="#000" size="32rpx" lines="1" bold line-height="60rpx" />
					<u-text :text="`￥${detail.price || '-'}`" color="#FF3E3E" size="40rpx" lines="1" bold />
				</view>
				<view>
					<view class="btn" :class="{ disabled: timeout }" @click="handlePay">支付</view>
				</view>
			</view>
			<Sub-title label="活动介绍" bottom-color="#E9F4F4" />
			<u-parse :content="detail.content" />
		</view>
		<Coupon-popup v-model="couponShow" :list="couponList" @close="closeCoupon" @confirm="confirmCoupon" />
	</view>
</template>

<script>
	import Navbar from "@/components/Navbar/index";
	import CouponPopup from "@/pages/home/cp/CouponPopup";

	import {
		homeTrendDetail,
		homeAddOrder
	} from "@/request/homeApi.js";
	import {
		myCouponList
	} from "@/request/myApi.js";
	export default {
		components: {
			Navbar,
			CouponPopup
		},
		data() {
			return {
				detail: {}, // 详情内容
				coupon: {}, // 优惠券信息
				couponShow: false, // 优惠券弹窗
				couponList: [], // 优惠券列表
			};
		},
		computed: {
			// 是否已过期
			timeout() {
				let end = Number(new Date(this.detail.end_time + " 23:59:59"));
				let now = Number(new Date());
				return now > end;
			},
		},
		onLoad(e) {
			this.getData(e.id);
			this.getCouponList();
		},
		// 监听页面滚动
		onPageScroll(scroll) {
			uni.$emit("onPageScroll", scroll.scrollTop);
		},
		methods: {
			// 预览图片
			preImage() {
				uni.previewImage({
					urls: [this.detail.cover_img],
				});
			},
			// 点击拨号
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detail.phone,
				});
			},
			// 跳转地图
			handleMap() {
				// let result = this.$store.dispatch("permission/requestPermissions",
				// 	'ACCESS_FINE_LOCATION')
				// if (result !== 1) return
				const {
					lat,
					lng,
					address
				} = this.detail;
				// uni.openLocation({
				//   latitude: lat,
				//   longitude: lng,
				//   address: address,
				//   scale: 16,
				// });
				uni.navigateTo({
					url: `/pages/parse/map?lat=${lat}&lng=${lng}`
				});
			},
			// 打开优惠券弹窗
			handleCoupon() {
				this.couponShow = true;
			},
			// 关闭优惠券弹窗
			closeCoupon() {
				this.couponShow = false;
			},
			// 选择优惠券
			confirmCoupon(v) {
				if (v.type == "reduction") {
					v.name = `满${Number(v.limit)}减${Number(v.price)}`;
				}
				if (v.type == "discount") {
					v.name = `满${Number(v.limit)}打${Number(v.discount)}折`;
				}
				if (v.choice) {
					this.coupon = v;
				} else {
					this.coupon = {
						name: ""
					};
				}
				this.couponShow = false;
			},
			// 获取优惠券列表
			getCouponList() {
				let data = {
					shop_id: 0, // 不需要指定店铺
					price: this.detail.price,
				};
				this.couponList = [];
				myCouponList(data).then((res) => {
					if (res.code == 1) {
						this.couponList = res.data.data;
					}
				});
			},
			// 获取详情
			getData(id) {
				homeTrendDetail({
					id
				}).then((res) => {
					if (res.code == 1) {
						this.detail = res.data;
					}
				});
			},
			// 买票
			handlePay() {
				if (this.timeout) {
					uni.showToast({
						title: "该活动已结束",
						icon: "none",
					});
					return;
				}
				this.$author(() => {
					let data = {
						type: "information",
						id: this.detail.id,
						coupon_id: this.coupon?.id,
						number: 1,
					};
					homeAddOrder(data).then((res) => {
						if (res.code == 1) {
							console.log(res.data);
							let {
								list,
								token
							} = res.data;
							uni.navigateTo({
								url: `/pages/mall/cashier?token=${token}&data=${JSON.stringify(list)}`,
							});
						}
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		.body {
			width: 100%;
			padding: 20rpx;
			z-index: 8;
			min-height: 100rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-top: -80rpx;
			border-radius: 40rpx 40rpx 0 0;
			position: relative;

			.mark {
				position: absolute;
				top: -80rpx;
				right: 30rpx;
				width: 172rpx;
				height: 56rpx;
				color: #fff;
				font-size: 28rpx;
				line-height: 56rpx;
				text-align: center;
				border-radius: 40rpx;
				background-color: #0000006b;
			}

			.tag {
				position: absolute;
				right: 0;
				top: 40rpx;
				color: #fff;
				font-weight: 600;
				font-size: 32rpx;
				background-color: #3ba199cc;
				padding: 4rpx 24rpx;
				border-radius: 24rpx 0 0 24rpx;
			}

			.base {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				>view:first-child {
					flex: 1;
				}

				.status {
					width: 116rpx;
				}
			}

			.card-item {
				width: 100%;
				height: 140rpx;
				margin: 20rpx 0;
				background-size: 100% 100%;
				padding: 40rpx;
				display: flex;
				box-sizing: border-box;
				align-items: center;

				>view:first-child {
					flex: 1;
				}

				>view:last-child {
					width: 172rpx;

					.btn {
						width: 172rpx;
						height: 56rpx;
						color: #fff;
						font-size: 28rpx;
						line-height: 56rpx;
						text-align: center;
						border-radius: 28rpx;
						background-color: #3ba199;
					}

					.disabled {
						color: #f9f9f9;
						background-color: #dbdbdb;
					}
				}
			}
		}
	}
</style>